<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB三维学习分析</title>
    <link rel="stylesheet" href="./static/css/main.css">
    <script src="./widget/kInput/index.js"></script>
    <script src="./widget/kIcon/index.js"></script>
    <script src="./widget/kButton/index.js"></script>
    <style>
        #app {
            width: 700px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 1rem;
            /* background-color: #212121; */
        }

        .app-group {
            display: flex;
            justify-content: flex-start;
            gap: 1rem;
        }
    </style>
</head>

<body>
    <main id="app">
        <k-input id="kinput"></k-input>
        <k-icon name="search" color="green" size="30"></k-icon>
        <div class="app-group" style="gap: 10px">
            <k-button type="dashed">default</k-button>
            <k-button status="success" id="sucBtn" type="outset">success</k-button>
            <k-button status="warning" id="warBtn">warning</k-button>
            <k-button status="primary">primary</k-button>
            <k-button status="danger">danger</k-button>
        </div>
        <div class="app-group" id="switchContainer" style="gap: 10px"></div>
    </main>
    <!-- <script type="module" src="./main.js"></script> -->
    <script type="module">

        const kinput = document.querySelector('#kinput');
        kinput.registerEvent('change', (event) => {
            console.log(event.target.value)
        });

        const sucBtn = document.querySelector('#sucBtn');
        sucBtn.registerEvent('click', (e) => {
            console.log('success')
        });

        const warBtn = document.querySelector('#warBtn');
        warBtn.registerEvent('click', (e) => {
            console.log('warBtn')
        });
    </script>
</body>

</html>